<template>
  <h1>个人简历练习</h1>
  <button @click="add()">加载数据</button>
  <hr>
  <table border="1">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="f in person.friends">{{f}}</li>
        </ul>
      </td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";
//1.定义对象
const person = ref({name:'',age:'',imgUrl:'',friends:[]});
//2.定义添加方法
const add = () => {
  person.value = {
    name:'中二阿璨',
    age:28,
    imgUrl:'ac.jpg',
    friends:['摆烂小麟','摸鱼小游','小明']
  }
}

</script>

<style scoped>

</style>